<template>
	<view class="content">
		<view class="yhk">
			<view class="xzyhk" style="font-size: 35rpx; font-weight: bold;">请选择银行卡</view>
			<view class="" v-for="(item, idx) in yhmc1">
				<view class="kuai" @click="xuanzeka(item)">
					<view class="">
						<image class="logo" :src="item.img" mode=""></image>
						<view class="name">{{item.name}}</view>
					</view>
					<image v-if="item.id == shifou" style="width: 50rpx; height: 50rpx;" src="@/static/wallet/gou.png"
						mode=""></image>
				</view>
			</view>
			<view class="xzyhk" @click="qita">其他银行卡</view>
			<view class="shuruyhk" v-show="show">
				<!-- <input class="shurukuang" type="text" placeholder="请输入开户行名称" v-model="kaihuhang" /> -->
				<view class="xzyhk">开户行：</view>
				<uni-data-select class="xzkuang" v-model="kaihuhang" :localdata="yhmc2" @change="change1"
					placeholder="请选择开户行" :clear="false">
				</uni-data-select>
			</view>
			<view style="display: flex; align-items: center;">
				<view class="xzyhk">卡类型:</view>
				<uni-data-select class="xzkuang" v-model="kaleixing" :localdata="leixing" @change="change1"
					placeholder="请选择卡类型" :clear="false">
				</uni-data-select>
			</view>
			<view style="display: flex; align-items: center;">
				<view class="xzyhk">卡用途:</view>
				<uni-data-select class="xzkuang" v-model="kayongtu" :localdata="yongtu" @change="change1"
					placeholder="请选择卡用途" :clear="false">
				</uni-data-select>
			</view>
		</view>
		<view class="yhk" style="margin-top: 50rpx;">
			<view class="xzyhk" style="font-size: 35rpx; font-weight: bold;">请输入卡号</view>
			<view class="shuruyhk">
				<view class="xzyhk">卡号：</view>
				<input class="shurukuang" type="number" placeholder="请输入银行卡号" v-model="yhkahao" @blur='wancheng' />
			</view>
		</view>
		<button @click="tianjia" class="jia" type="primary">确认{{queren}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("member"),
				card: {},
				index1: 0,
				queren: '添加',
				yhmc1: [{
						id: 0,
						name: '农业银行',
						img: '../../../static/wallet/nongye.png',
						url: '',
					},
					{
						id: 1,
						name: '工商银行',
						img: '../../../static/wallet/gongshang.png',
						url: './bankCard',
					},
					{
						id: 2,
						name: '建设银行',
						img: '../../../static/wallet/jianshe.png',
						url: '',
					},
					{
						id: 3,
						name: '中国银行',
						img: '../../../static/wallet/zhongguo.png',
						url: '',
					},
				],
				leixing: [],
				yongtu: [],
				yhmc2: [],
				shifou: null,
				show: false,
				kaihuhang: null,
				kaleixing: null,
				kayongtu: null,
				yhkahao: null,
			}
		},
		onLoad(opt) {
			this.xuanxiang();
			if (opt.id) {
				this.queren = '修改'
				this.id = opt.id
				this.xiugai();
			}
		},
		methods: {
			xuanxiang() {
				let self = this
				let data = {
					category: '卡的使用用途,卡类型,银行名称'
				}
				this.$boya.NPost('/app/base_dict', data, function(res) {
					// console.log('shuju: ', res.data);
					let shuju = res.data
					for (var i = 0; i < shuju.length; i++) {
						if (shuju[i].category == '卡类型') {
							self.leixing.push(shuju[i])
						}
						if (shuju[i].category == '卡的使用用途') {
							self.yongtu.push(shuju[i])
						}
						if (shuju[i].category == '银行名称') {
							self.yhmc2.push(shuju[i])
						}
					}
					console.log('leixing: ', self.leixing);
					console.log('yongtu: ', self.yongtu);
					console.log('yhmc2: ', self.yhmc2);
				}, null, {
					showError: false
				});
			},
			xiugai() {
				let self = this
				let data = {
					uuid: self.user.uuid
				}
				this.$boya.NPost('/app/user/bank_card', data, function(res) {
					let shuju = res.data
					for (var i = 0; i < shuju.length; i++) {
						if (shuju[i].id == self.id) {
							self.card = shuju[i]
						}
					}
					console.log('银行卡：', self.card);
					self.yhkahao = self.card.card_no
				}, null, {
					showError: false
				});
			},
			change1(e) {
				console.log(e);
			},
			xuanzeka(item) {
				this.shifou = item.id
				this.show = false
				this.kaihuhang = item.name
				// console.log(this.kaihuhang);
			},
			qita() {
				this.shifou = null
				this.show = !this.show
			},
			wancheng() {
				if (this.yhkahao.substring(0, 2) !== '62') {
					this.$boya.msg("开头必须为‘62’")
					return
				}
			},
			tianjia() {
				let self = this
				// console.log('卡号：', self.yhkahao);
				// console.log('卡名：', self.kaihuhang);
				// let regex = /^[0-9]+$/;
				if (self.yhkahao == null || self.kaihuhang == null || self.kaleixing == null || self.kayongtu == null) {
					self.$boya.msg('数据未填报完成，请检查')
					return
				}
				// if regex.test(self.yhkahao) {
				// 	self.$boya.msg("开头必须为‘62’")
				// 	return
				// }
				if (self.yhkahao.substring(0, 2) !== '62') {
					self.$boya.msg("开头必须为‘62’")
					return
				}

				uni.showModal({
					title: '提示',
					content: '确认前请仔细检查，您确认提交吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							self.tijiao();
						} else if (res.cancel) {
							self.$boya.msg('您已取消')
						}
					}
				});
			},
			tijiao() {
				let self = this
				let data = {}
				if (self.queren == '修改') {
					data = {
						id: self.id,
						card_no: self.yhkahao,
						bank_name: self.kaihuhang,
						card_type: self.kaleixing,
						use_type: self.kayongtu,
						opt: 'upd'
					}
				} else {
					data = {
						card_no: self.yhkahao,
						bank_name: self.kaihuhang,
						card_type: self.kaleixing,
						use_type: self.kayongtu,
					}
				}

				console.log('data：', data);

				this.$boya.NPost('/app/user/add_bank_card', data, function(res) {

					if (res.code == 200) {
						uni.hideLoading();
						self.$boya.msg(self.queren + '成功')
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
					} else {
						self.$boya.msg(res.msg)
					}

				}, null, {
					showError: false
				});
			},
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100vw;
		height: 100vh;
		padding-top: 28rpx;
		background-color: #EDEDED;
	}

	.yhk {
		width: 90%;
		margin: 0 auto;
		border-radius: 20rpx;
		background-color: white;
		letter-spacing: 2rpx;
	}

	.xzyhk {
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 40rpx;
		border-bottom: 1px solid #F8F8F8;
	}

	.shuruyhk {
		display: flex;
		align-items: center;
	}

	.xzkuang {
		/* border-radius: 10rpx; */
		margin-left: 20rpx;
		/* border: 1px solid #EDEDED;
		background-color: #F8F8F8; */
	}

	.shurukuang {
		width: 455rpx;
		height: 75rpx;
		margin-left: 20rpx;
		padding-left: 20rpx;
		border-radius: 10rpx;
		border: 1px solid #EDEDED;
		background-color: #F8F8F8;
	}

	.kuai {
		display: flex;
		align-items: center;
		width: 90%;
		padding: 32rpx 40rpx;
		border-bottom: 1px solid #F8F8F8;
		justify-content: space-between;
	}

	.kuai>view {
		display: flex;
		align-items: center;
	}

	.logo {
		width: 50rpx;
		height: 50rpx;
	}

	.name {
		margin-left: 20rpx;
	}

	.jia {
		width: 250rpx;
		/* border-radius: 50rpx; */
		margin-top: 50rpx;

	}
</style>